<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>优惠券</title>
    <link rel="stylesheet" href="__CSS__/mui-3.6.1.min.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/coupon_center.css">
    <style>
        .mui-segmented-control.mui-scroll-wrapper .mui-scroll{
            width: 100%;
            justify-content: space-around;
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-control-item{
            padding: 0 5px;
            width:33.33%;
        }
        .mui-control-content{overflow: auto}
    </style>
</head>
<body>
<div class="topbar-between horizontal-view gradient-color">
    <div class="topbar-back" onclick='javascript:location.href="/Wx/Index/index/r/my.html"'>
        <div class="topbar-back-icon"></div>
    </div>
    <div class="topbar-title">优惠券</div>
    <div class="topbar-right"></div>
</div>
<div id="slider" class="mui-slider mui-fullscreen">
    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll horizontal-view">
            <a class="mui-control-item mui-active" href="#notUse">未使用</a>
            <a class="mui-control-item" href="#outOfDate">已过期</a>
            <a class="mui-control-item" href="#used">已使用</a>
        </div>
    </div>

    <div class="mui-slider-group"><!--未使用-->
        <div id="notUse" class="mui-slider-item mui-control-content mui-active">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <volist name="notUse" id="ns">
                    <li class="mui-table-view-cell coupon-wrap">
                        <div class="horizontal-view coupon-left">
                            <img class="coupon-image" src="{$ns.icon}">
                            <div class="vertical-view">
                                <div class="coupon-name">{$ns.msg}</div>
                                <div class="coupon-name">{$ns.shopName}</div>
                                <div class="coupon-time">{$ns.begin_time}-{$ns.end_time}</div>
                            </div>
                        </div>
                        <div class="vertical-view coupon-right gradient-color">
                            <div class="coupon-money">{$ns.breaks_menoy_msg}</div>
                            <div class="coupon-limit">{$ns.name}</div>
                            <div class="coupon-btn-use" onclick="javascript:location.href='/Wx/Shop/shop?id={$ns.shopId}'">马上使用</div>
                        </div>
                    </li>
                    </volist>
                </ul>
            </div>
        </div>
        <div id="outOfDate" class="mui-slider-item mui-control-content"><!--已过期-->
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <volist name="expireNoUse" id="enu">
                    <li class="mui-table-view-cell coupon-wrap">
                        <div class="horizontal-view coupon-left">
                            <img class="coupon-image" src="{$enu.icon}">
                            <div class="vertical-view">
                                <div class="coupon-name">{$enu.msg}</div>
                                <div class="coupon-time">{$enu.begin_time}-{$enu.end_time}</div>
                            </div>
                        </div>
                        <div class="vertical-view coupon-right ood-gray">
                            <div class="coupon-money">{$enu.breaks_menoy_msg}</div>
                            <div class="coupon-limit">{$enu.name}</div>
                            <div class="coupon-btn-disable" onclick="">已过期</div>
                        </div>
                    </li>
                    </volist>
                </ul>
            </div>
        </div>
        <div id="used" class="mui-slider-item mui-control-content"><!--已使用-->
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <volist name="exisUse" id="eu">
                    <li class="mui-table-view-cell coupon-wrap">
                        <div class="horizontal-view coupon-left">
                            <img class="coupon-image" src="{$eu.icon}">
                            <div class="vertical-view">
                                <div class="coupon-name">{$eu.msg}</div>
                                <div class="coupon-time">{$eu.begin_time}-{$eu.end_time}</div>
                            </div>
                        </div>
                        <div class="vertical-view coupon-right ood-gray">
                             <img class="to-use-img" src="/Tpl/Wx/image/coupon_use.png">
                            <div class="coupon-money">{$eu.breaks_menoy_msg}</div>
                            <div class="coupon-limit">{$eu.name}</div>
                            <div class="coupon-btn-disable">使用成功</div>
                        </div>
                    </li>
                    </volist>
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="__JS__/mui-3.6.1.min.js"></script>
<script>
    mui.init();

</script>
</body>
</html>